/**
 * Created by imac13 on 19/1/7.
 */
import React,{ Component } from 'react';
import {Card,Table,Modal,Button,message,Badge} from 'antd';
import axios from 'axios';

class HighTable extends Component {
    state={
        dataSource: [],
        loading:false
    };
    componentDidMount () {
        this.getTableList()
    };
    //动态获取数据
    getTableList = ()=> {
        const tableUrl = 'https://www.easy-mock.com/mock/5c31db8667fe190a45936ab9/mockapi';
        this.setState({loading:true});
        axios.get(tableUrl + '/hightable/list').then((res)=> {
            const data = res.data;
            data.result.list.map((item,index)=>{
                item.key = index
            });
            this.setState({
                dataSource:data.result.list,
                loading:false,
                selectedRows:null,
                selectedRowKeys:[],
            });

        }).catch(()=>{
            Modal.info({
                title:'提示',
                content:'获取失败'
            })
        })
    };
    handleItem = (item) => {
        let id = item.id;
        Modal.confirm({
            title:'确认',
            content:'您确认要删除此条数据吗？',
            onOk:()=>{
                message.success('删除成功')
                this.getTableList()
            }
        })
    };
    render(){
        const columns = [
            {
                title: 'id',
                dataIndex :'id',
                width:60
            },
            {
                title: '用户名',
                dataIndex :'username',
                width:80
            },
            {
                title : '性别',
                dataIndex :'sex',
                render(sex){
                    return sex == 1 ? '男' : '女'
                },
                width:80
            },
            {
                title: '状态',
                dataIndex :'status',
                render(status){
                    let config = {
                        '1':<Badge status="success" text="开心"/>,
                        '2':<Badge status="error" text="不开心"/>,
                        '3':<Badge status="default" text="激动"/>,
                        '4':<Badge status="processing" text="痛苦"/>,
                        '5':<Badge status="warning" text="乐观"/>,
                    };
                    return config[status]
                },
                width:80
            },
            {
                title : '年龄',
                dataIndex :'age',
                width:80
            },
            {
                title: '生日',
                dataIndex :'birthday',
                width:160
            }
        ];
        const columns2 = [
            {
                title: 'id',
                dataIndex :'id',
                width:60,
                fixed:'left'
            },
            {
                title: '用户名',
                dataIndex :'username',
                width:80,
                fixed:'left'
            },
            {
                title : '性别',
                dataIndex :'sex',
                render(sex){
                    return sex == 1 ? '男' : '女'
                },
                width:80
            },
            {
                title: '状态',
                dataIndex :'status',
                render(status){
                    let config = {
                        '1':'开心',
                        '2':'不开心',
                        '3':'激动',
                        '4':'痛苦',
                        '5':'乐观',
                    };
                    return config[status]
                },
                width:80
            },
            {
                title: '状态',
                dataIndex :'status',
                render(status){
                    let config = {
                        '1':'开心',
                        '2':'不开心',
                        '3':'激动',
                        '4':'痛苦',
                        '5':'乐观',
                    };
                    return config[status]
                },
                width:80
            },
            {
                title: '状态',
                dataIndex :'status',
                render(status){
                    let config = {
                        '1':'开心',
                        '2':'不开心',
                        '3':'激动',
                        '4':'痛苦',
                        '5':'乐观',
                    };
                    return config[status]
                },
                width:80
            },
            {
                title: '状态',
                dataIndex :'status',
                render(status){
                    let config = {
                        '1':'开心',
                        '2':'不开心',
                        '3':'激动',
                        '4':'痛苦',
                        '5':'乐观',
                    };
                    return config[status]
                },
                width:80
            },
            {
                title: '状态',
                dataIndex :'status',
                render(status){
                    let config = {
                        '1':'开心',
                        '2':'不开心',
                        '3':'激动',
                        '4':'痛苦',
                        '5':'乐观',
                    };
                    return config[status]
                },
                width:80
            },
            {
                title: '状态',
                dataIndex :'status',
                render(status){
                    let config = {
                        '1':'开心',
                        '2':'不开心',
                        '3':'激动',
                        '4':'痛苦',
                        '5':'乐观',
                    };
                    return config[status]
                },
                width:80
            },
            {
                title: '状态',
                dataIndex :'status',
                render(status){
                    let config = {
                        '1':'开心',
                        '2':'不开心',
                        '3':'激动',
                        '4':'痛苦',
                        '5':'乐观',
                    };
                    return config[status]
                },
                width:80
            },
            {
                title: '状态',
                dataIndex :'status',
                render(status){
                    let config = {
                        '1':'开心',
                        '2':'不开心',
                        '3':'激动',
                        '4':'痛苦',
                        '5':'乐观',
                    };
                    return config[status]
                },
                width:80
            },
            {
                title: '状态',
                dataIndex :'status',
                render(status){
                    let config = {
                        '1':'开心',
                        '2':'不开心',
                        '3':'激动',
                        '4':'痛苦',
                        '5':'乐观',
                    };
                    return config[status]
                },
                width:80
            },
            {
                title: '状态',
                dataIndex :'status',
                render(status){
                    let config = {
                        '1':'开心',
                        '2':'不开心',
                        '3':'激动',
                        '4':'痛苦',
                        '5':'乐观',
                    };
                    return config[status]
                },
                width:80
            },
            {
                title: '状态',
                dataIndex :'status',
                render(status){
                    let config = {
                        '1':'开心',
                        '2':'不开心',
                        '3':'激动',
                        '4':'痛苦',
                        '5':'乐观',
                    };
                    return config[status]
                },
                width:80
            },
            {
                title : '年龄',
                dataIndex :'age',
                width:80
            },
            {
                title: '生日',
                dataIndex :'birthday',
                width:160,
                fixed:'right'
            },
        ];
        const columns3 = [
            {
                title: 'id',
                dataIndex :'id',
            },
            {
                title: '用户名',
                dataIndex :'username',
            },
            {
                title : '性别',
                dataIndex :'sex',
                render(sex){
                    return sex == 1 ? '男' : '女'
                },
            },
            {
                title: '状态',
                dataIndex :'status',
                render(status){
                    let config = {
                        '1':<Badge status="success" text="开心"/>,
                        '2':<Badge status="error" text="不开心"/>,
                        '3':<Badge status="default" text="激动"/>,
                        '4':<Badge status="processing" text="痛苦"/>,
                        '5':<Badge status="warning" text="乐观"/>,
                    };
                    return config[status]
                }
            },
            {
                title : '年龄',
                dataIndex :'age',
                sorter: (a, b) => a.age - b.age,
            },
            {
                title: '生日',
                dataIndex :'birthday',
            }
        ];
        const columns4 = [
            {
                title: 'id',
                dataIndex :'id',
            },
            {
                title: '用户名',
                dataIndex :'username',
            },
            {
                title : '性别',
                dataIndex :'sex',
                render(sex){
                    return sex == 1 ? '男' : '女'
                },
            },
            {
                title: '状态',
                dataIndex :'status',
                render(status){
                    let config = {
                        '1':'开心',
                        '2':'不开心',
                        '3':'激动',
                        '4':'痛苦',
                        '5':'乐观',
                    };
                    return config[status]
                }
            },
            {
                title : '年龄',
                dataIndex :'age',

            },
            {
                title: '操作',
                render:(text,item)=>{
                    return <Button size="small" onClick={(item)=>{this.handleItem(item)}}>删除</Button>
                }
            }
        ];
        return(
            <div>
                <Card title="头部固定">
                    <Table
                        columns={columns}
                        dataSource={this.state.dataSource}
                        pagination={false}
                        scroll={{y:240}}
                    />
                </Card>
                <Card title="侧部固定">
                    <Table
                        columns={columns2}
                        dataSource={this.state.dataSource}
                        loading={this.state.loading}
                        scroll={{x:1380}}
                    />
                </Card>
                <Card title="表格排序">
                    <Table
                        columns={columns3}
                        dataSource={this.state.dataSource}
                        pagination={this.state.pagination}
                        loading={this.state.loading}
                    />
                </Card>
                <Card title="操作按钮">
                    <Table
                        columns={columns4}
                        dataSource={this.state.dataSource}
                        pagination={this.state.pagination}
                        loading={this.state.loading}
                    />
                </Card>
            </div>
        )
    }
}

export default HighTable;